<template>
  <div id="ee">
    <div class="ee">
      <div class="body">
        <div class="form">
          <el-form :rules="rules" :model="form">
            <el-form-item prop="eeSname">
              <el-input v-model="form.eeSname" placeholder="请输入学校名称" />
            </el-form-item>
            <el-form-item prop="eeEra">
              <el-select v-model="form.eeEra" placeholder="请选择教育时代">
                <el-option
                  v-for="item in eeTable"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="eeSeva">
              <el-input v-model="form.eeSeva" placeholder="请输入自我评价" />
            </el-form-item>
            <!-- 时间 -->
            <el-form-item prop="eeStart">
              <el-date-picker
                v-model="form.eeStart"
                type="date"
                placeholder="请选择日期"
              />
              <span style="margin: 0 2%">——</span>
              <el-date-picker
                v-model="form.eeEnd"
                type="date"
                placeholder="请选择日期"
              />
            </el-form-item>
            <el-form-item prop="eeOve">
              <el-input
                v-model="form.eeOve"
                type="textarea"
                placeholder="请输入内容讲解"
                :rows="3"
                resize="none"
              />
            </el-form-item>

            <el-form-item>
              <el-button @click="AddJ" round>修改</el-button>
              <el-button round>回退</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormRules, UploadProps, UploadUserFile } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const fileList = ref<UploadUserFile[]>([]);

const form = reactive({
  id: "",
  eeEra: "",
  eeSname: "",
  eeSeva: "",
  eeOve: "",
  eeStart: "",
  eeEnd: "",
});
const eeTable = [
  {
    value: "1",
    label: "小学",
  },
  {
    value: "2",
    label: "中学初级",
  },
  {
    value: "3",
    label: "中学高级",
  },
  {
    value: "4",
    label: "大学",
  },
  {
    value: "5",
    label: "研究生硕士",
  },
  {
    value: "6",
    label: "研究生博士",
  },
];
const rules = reactive<FormRules>({
  primTitle: [
    { required: true, message: "请输入标题内容", trigger: "blur" },
    { min: 3, max: 30, message: "不要超过30", trigger: "blur" },
  ],
  primSeva: [
    { required: true, message: "请输入自我评价", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  primStart: [{ required: true, message: "请选择初始时间", trigger: "blur" }],
  primEnd: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
  primCon: [
    { required: true, message: "请输入历史内容", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
});

const AddJ = () => {
  alert("提交成功");
};
const dialogImageUrl = ref("");
//显示预览上传的图片
const dialogVisible = ref(false);

//删除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
//浏览图片
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

<style lang="less" scoped>
#ee {
  width: 100%;
  height: 100%;
  .ee {
    width: 100%;
    height: 100%;
    .body {
      width: 100%;
      .form {
        width: 100%;
        :deep(.el-form-item__label) {
          color: white;
        }

        :deep(.el-input__wrapper) {
          --el-input-focus-border-color: aqua;
          .el-input__inner {
            color: white;
            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }
        :deep(.el-input__wrapper) {
          background-color: transparent;
          .el-input__inner {
            // background-color: transparent;
          }
        }
        :deep(.el-textarea) {
          // 一下为正常
          background-color: transparent;
          .el-textarea__inner {
            overflow: hidden;
            overflow-y: scroll;
            &::-webkit-scrollbar {
              width: 2px;
              height: 100%;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 2px;
              background: aqua;
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              border-radius: 2px;
              background: rgba(white, 0.2);
            }
            background-color: transparent;
            --el-input-focus-border-color: aqua;
            color: white;
            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }
        :deep(.el-button) {
          margin: 0 auto;
          width: 30%;
          background-color: transparent;
          color: white;
          &:first-child {
            --el-button-border-color: aqua;
            --el-button-active-border-color: aqua;
            --el-button-hover-text-color: aqua;
            --el-button-divide-border-color: aqua;
          }
        }
        :deep(.el-dialog) {
          width: 30%;
          --el-dialog-bg-color: rgba(255, 119, 0, 0.1);
          border-image-source: radial-gradient(
            65% 65%,
            transparent 0px,
            transparent 100%,
            orange 100%
          );
          border-image-slice: 1;
          border-width: 2px;
          border-style: solid;
          .el-dialog__title {
            color: orange;
          }
          .el-dialog__close {
            color: orange;
            &:hover {
              color: red;
            }
          }
          .el-dialog__body {
            span {
              color: white;
            }
          }
          .pImg {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
